<template>
	<view class="page">
		<!-- 顶部拼团失败提示 -->
		<view class="header">
			<view class="title-container">
				<view class="header-title">拼团失败</view>
				<view class="header-subtitle">款项已原路返还您的微信账户</view>
			</view>
			<image class="close-icon" src="/static/svg/close-icon.svg" mode="aspectFit" @click="back"></image>
		</view>

		<!-- 地址信息 -->
		<view class="address-card">
			<view class="address-info">
				<image class="location-icon" src="/static/svg/location-icon.svg" mode="aspectFit"></image>
				<view class="address-content">
					<view class="user-info">
						<text class="user-name">{{ userInfo.name }}</text>
						<text class="user-phone">{{ userInfo.phone }}</text>
					</view>
					<view class="address-text">{{ userInfo.address }}</view>
				</view>
			</view>
		</view>

		<!-- 拼团失败信息 -->
		<view class="group-fail-card">
			<view class="group-fail-header">
				<image class="group-fail-icon" src="/static/svg/group-fail.svg" mode="aspectFit"></image>
				<text class="group-fail-text">拼团失败</text>
			</view>
			<view class="group-leader">
				<view class="leader-avatar-container">
					<image class="leader-avatar" src="/static/svg/default-avatar.svg" mode="aspectFit"></image>
					<text class="leader-tag">团长</text>
				</view>
				<image class="question-icon" src="/static/svg/question.svg" mode="aspectFit"></image>
			</view>
			<button class="restart-btn" @click="regroup">重新开团</button>
		</view>

		<!-- 商品信息 -->
		<view class="product-card">
			<view class="product-item">
				<view class="product-image-container">
					<image class="product-image" src="/static/svg/cake-matcha.svg" mode="aspectFit"></image>
					<view class="group-tag">3人团</view>
				</view>
				<view class="product-info">
					<view class="product-name">{{ product.name }}</view>
					<view class="product-price-info">
						<text class="product-price">¥{{ product.price }}</text>
						<text class="product-count">×{{ product.count }}</text>
					</view>
					<text class="product-spec">{{ product.spec }}</text>
				</view>
			</view>
		</view>

		<!-- 价格信息 -->
		<view class="price-card">
			<view class="price-item">
				<text class="price-label">商品总额：</text>
				<text class="price-value">¥{{ orderInfo.totalAmount.toFixed(2) }}</text>
			</view>
			<view class="price-item">
				<text class="price-label">运费：</text>
				<text class="price-value">¥{{ orderInfo.shippingFee.toFixed(2) }}</text>
			</view>
			<view class="price-item">
				<text class="price-label">商品优惠：</text>
				<text class="price-value">-¥{{ orderInfo.discount.toFixed(2) }}</text>
			</view>
			<view class="divider"></view>
			<view class="price-item total">
				<text class="price-label">实付款：</text>
				<text class="price-value highlight">¥{{ orderInfo.payAmount.toFixed(2) }}</text>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="order-card">
			<view class="order-item">
				<text class="order-label">订单号</text>
				<text class="order-value">{{ orderInfo.orderNumber }}</text>
			</view>
			<view class="order-item">
				<text class="order-label">下单时间</text>
				<text class="order-value">{{ orderInfo.orderTime }}</text>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="footer">
			<button class="delete-btn" @click="deleteOrder">删除订单</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 用户信息
const userInfo = ref({
  name: '李小花',
  phone: '1885138766',
  address: '广东省广州市大华区明离路科技园880号'
});

// 订单信息
const orderInfo = ref({
  orderNumber: '418628327723666',
  orderTime: '2019-02-36 15:36:25',
  totalAmount: 136.00,
  shippingFee: 0.00,
  discount: 10.00,
  payAmount: 120.00
});

// 商品信息
const product = ref({
  name: '艾丽苏抹茶蛋糕早点低糖健康',
  price: 136,
  count: 1,
  spec: '实惠装'
});

// 页面方法
function regroup() {
  uni.navigateTo({
    url: '/pages/product/detail?productId=123456' // 假设产品ID
  });
}

function deleteOrder() {
  uni.showModal({
    title: '提示',
    content: '确定要删除此订单吗？',
    success: function(res) {
      if (res.confirm) {
        // 调用删除订单接口
        uni.showToast({
          title: '订单已删除',
          icon: 'success',
          duration: 2000,
          complete: function() {
            // 返回订单列表页
            uni.navigateBack();
          }
        });
      }
    }
  });
}

function back() {
  uni.navigateBack();
}
</script>

<style>
	.page {
		padding-bottom: 40rpx;
		background-color: #f5f5f5;
	}

	/* 头部样式 */
	.header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 40rpx 30rpx;
		background-color: #FF6B43;
		color: #fff;
	}

	.header-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.header-subtitle {
		font-size: 28rpx;
	}

	.close-icon {
		width: 40rpx;
		height: 40rpx;
	}

	/* 地址卡片样式 */
	.address-card {
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.address-info {
		display: flex;
		padding: 30rpx;
	}

	.location-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.address-content {
		flex: 1;
	}

	.user-info {
		display: flex;
		margin-bottom: 10rpx;
	}

	.user-name {
		font-size: 32rpx;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.user-phone {
		font-size: 32rpx;
		color: #666;
	}

	.address-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.4;
	}

	/* 拼团失败卡片 */
	.group-fail-card {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.group-fail-header {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.group-fail-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.group-fail-text {
		color: #FFAA00;
		font-size: 30rpx;
	}

	.group-leader {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.leader-avatar-container {
		position: relative;
	}

	.leader-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.leader-tag {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		background-color: #FFAA00;
		color: #fff;
		font-size: 20rpx;
		padding: 4rpx 10rpx;
		border-radius: 10rpx;
	}

	.question-icon {
		width: 100rpx;
		height: 100rpx;
	}

	.restart-btn {
		background-color: #FFDD00;
		color: #333;
		font-size: 30rpx;
		border: none;
		border-radius: 10rpx;
		padding: 15rpx 0;
	}

	/* 商品卡片样式 */
	.product-card {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.product-item {
		display: flex;
	}

	.product-image-container {
		position: relative;
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
	}

	.product-image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.group-tag {
		position: absolute;
		left: 0;
		bottom: 0;
		background-color: #FF6B43;
		color: #fff;
		font-size: 20rpx;
		padding: 4rpx 12rpx;
		border-radius: 0 10rpx 0 8rpx;
	}

	.product-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.product-name {
		font-size: 28rpx;
		margin-bottom: 10rpx;
		line-height: 1.4;
	}

	.product-price-info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.product-price {
		font-size: 28rpx;
		font-weight: bold;
	}

	.product-count {
		font-size: 28rpx;
		color: #666;
	}

	.product-spec {
		font-size: 24rpx;
		color: #999;
	}

	/* 价格卡片样式 */
	.price-card {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.price-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}

	.price-label {
		font-size: 28rpx;
		color: #666;
	}

	.price-value {
		font-size: 28rpx;
		color: #333;
	}

	.divider {
		height: 1rpx;
		background-color: #eee;
		margin: 15rpx 0;
	}

	.total {
		margin-top: 15rpx;
	}

	.highlight {
		color: #FF6B43;
		font-weight: bold;
	}

	/* 订单信息样式 */
	.order-card {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.order-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}

	.order-label {
		font-size: 28rpx;
		color: #666;
	}

	.order-value {
		font-size: 28rpx;
		color: #333;
	}

	/* 底部按钮样式 */
	.footer {
		display: flex;
		justify-content: flex-end;
		padding: 0 30rpx;
	}

	.delete-btn {
		width: 220rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border: 1px solid #FF6B43;
		color: #FF6B43;
		font-size: 28rpx;
		background-color: #fff;
		border-radius: 35rpx;
	}
</style>
